<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>FileReader使用</title>
	</head>

	<body>

		<!-- 展示图片-->
		<!-- src: 指定路径,请求的是外部文件,一般来说是服务器资源.
			意味着它需要向服务器发送请求,它占用服务器资源
		-->
		<img src="" id="showImage" name="showImage" width="800" height="600" />

		<form action="" method="post">
			文件:
			<input type="file" name="tempFile" id="tempFile" onchange="getFileContent()" />
			<br />
			<input type="submit" value="提交" />
		</form>

		<script type="text/javascript">
			/**
			 * FileReader: 读取文件的内容
			 * 1. readAsText(): 读取文本文件(可以使用Txt打开的文件),返回文本字符串,默认编码是UTF-8
			 * 2. readAsBinaryString(): 读取任意类型的文件,返回二进制字符串,这个方法不是用来读取文件展示给用户看,而是存储文件.
			 * 							例如: 读取文件的内容,获取二进制数据,传输给后台,后台收了数据之后,再将数据存在.
			 * 3. readAsDataURL(): 读取文件获取一段以data开头的字符串,这段字符串的本质就是DataURL.
			 * 					   DataURL是一种将文件嵌入到文档的方案.
			 * 					   DataURL是将资源转换为Base64编码的字符串形式,并且将这些内容直接存储到url中,优化网站的加载速度和执行效率
			 * 4. abort(): 中断读取.
			 * */

			function getFileContent() {
				console.log("调用了~~~~~~~")

				// 1.创建文件读取对象
				var reader = new FileReader();

				var tempFile = document.querySelector("#tempFile").files;
				console.log(tempFile)

				// 2.读取文件
				reader.readAsDataURL(tempFile[0]);

				/**FileReader 提供了完整的事件模型,用来捕获读取文件时的状态
				 * onabort: 读取文件中断时触发
				 * onerror: 读取文件失败时触发
				 * onload:  读取文件成功时触发
				 * onloadend: 读取文件完成时触发(包含成功或失败)
				 * onloadstart: 开始读取时触发
				 * onprogress: 读取文件过程中持续触发
				 * */

				// 监听事件
				reader.onload = function() {
					document.querySelector("#showImage").src = reader.result
				}

			}
		</script>
	</body>

</html>